<!-- 图表统计 -->
<!-- 图表统计 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    width="780"
    title="图表统计"
    draggable
    appendToBody
    destroyOnClose
    lockScroll
    :closeOnClickModal="false"
    @opened="onOpened"
  >
    <div id="drama-purchase-list-chart-1" style="width: 100%; height: 400px"></div>
  </el-dialog>
</template>

<script setup lang="ts">
  import type { DramaPurchase } from '@/api/drama-management';
  import { initMyEChart, lineChart } from '@/utils/echarts';

  type $ShowData = {
    /** 表格信息 */
    tableData: DramaPurchase[];
  };

  type SeriesItem = { name: string; data: number[] };
  type ChartData = { series: SeriesItem[]; xAxis: { data: string[] } };

  const dialogVisible = ref(false);
  const globalStore = useGlobalStore();

  let chartData: ChartData = { series: [], xAxis: { data: [] } };
  /**
   * 显示
   */
  function show(data: $ShowData) {
    const _chartData: ChartData = { series: [], xAxis: { data: [] } };
    const series1: SeriesItem = { name: '付费金额(元)', data: [] };
    const series2: SeriesItem = { name: '单集价格(元)', data: [] };
    const series3: SeriesItem = { name: '全集价格(元)', data: [] };
    data.tableData.forEach((item) => {
      series1.data.push(item.totalAmount);
      series2.data.push(item.price);
      series3.data.push(item.allEpisodePrice);
      _chartData.xAxis.data.push(item.dramaTitle);
    });
    _chartData.series!.push(series1);
    _chartData.series!.push(series2);
    _chartData.series!.push(series3);
    chartData = _chartData;

    dialogVisible.value = true;
  }

  /**
   * 弹出框打开完成
   */
  function onOpened() {
    nextTick(() => {
      // 默杀
      // chartData = {
      //   'series': [
      //     { 'name': '付费金额(元)', 'data': [12.25, 20, 0, 0, 0, 9.9] },
      //     { 'name': '单集价格(元)', 'data': [1, 1, 1, 0.5, 1, 1] },
      //     { 'name': '全集价格(元)', 'data': [9.9, 9.9, 9.9, 9.9, 9.9, 29.9] },
      //     { 'name': '投流金额(元)', 'data': [5150.69, 4099.04, 4114.99, 3135.26, 4146.63, 4579.89] },
      //   ],
      //   'xAxis': { 'data': ['7.26', '7.27', '7.28', '7.29', '7.30', '7.31'] },
      // };

      // // 囚爱
      // chartData = {
      //   'series': [
      //     { 'name': '付费金额(元)', 'data': [12.25, 20, 0, 0, 0, 0] },
      //     { 'name': '单集价格(元)', 'data': [1, 1, 1, 0.5, 1, 1] },
      //     { 'name': '全集价格(元)', 'data': [9.9, 9.9, 9.9, 9.9, 9.9, 9.9] },
      //     { 'name': '投流金额(元)', 'data': [4150.69, 3499.04, 3114.99, 4135.26, 3146.63, 3135.89] },
      //   ],
      //   'xAxis': { 'data': ['7.26', '7.27', '7.28', '7.29', '7.30', '7.31'] },
      // };

      // // 囚爱
      // chartData = {
      //   'series': [
      //     { 'name': '付费金额(元)', 'data': [142.25, 180.7, 60.3, 54.5, 35.5, 74.5, 17.5, 0] },
      //     { 'name': '单集价格(元)', 'data': [1, 1, 1, 0.5, 1, 1, 1, 1] },
      //     { 'name': '全集价格(元)', 'data': [9.9, 9.9, 9.9, 9.9, 9.9, 9.9, 9.9, 9.9] },
      //     { 'name': '投流金额(元)', 'data': [4150.69, 3499.04, 3114.99, 4135.26, 3146.63, 3135.89, 3146.63, 3135.89] },
      //   ],
      //   'xAxis': { 'data': ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周'] },
      // };
      // // 囚爱
      // chartData = {
      //   'series': [
      //     { 'name': '付费金额(元)', 'data': [0, 0] },
      //     { 'name': '单集价格(元)', 'data': [1, 1] },
      //     { 'name': '全集价格(元)', 'data': [9.9, 9.9] },
      //     { 'name': '投流金额(元)', 'data': [4346.63, 3135.89] },
      //   ],
      //   'xAxis': { 'data': ['6月', '7月'] },
      // };

      // // 奈何总裁他太撩
      // chartData = {
      //   'series': [
      //     { 'name': '付费金额(元)', 'data': [2312.25, 8033.35, 4122.25, 1033.35, 549.55, 339.55, 242.63] },
      //     { 'name': '单集价格(元)', 'data': [1, 1, 1, 1, 1, 1, 1] },
      //     { 'name': '全集价格(元)', 'data': [49.9, 49.9, 49.9, 49.9, 49.9, 49.9, 49.9] },
      //     { 'name': '投流金额(元)', 'data': [3150.69, 7499.04, 5114.99, 2135.26, 846.63, 542.63, 442.63] },
      //   ],
      //   'xAxis': { 'data': ['8.29', '8.30', '8.31', '9.1', '9.2', '9.3', '9.4'] },
      // };
      initMyEChart('drama-purchase-list-chart-1', globalStore.globalTheme, lineChart(chartData));
    });
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>
